<script setup lang="ts">
  import { ref } from 'vue'
  import smsTemplateDetailService from '../services/detail'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HModal from '@/components/common/Modal/HModal.vue'

  const { smsTemplateDetail, getSmsTemplateDetailLoading, getSmsTemplateDetailFn } =
    smsTemplateDetailService

  const props = defineProps({
    smsTemplateId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update'): void
  }>()

  // 弹窗状态
  const modalVisible = ref(false)

  // 是否启用
  const status = ref(false)

  // 显示弹窗
  // 因为status为false是启用，绑定到switch开关组件时是显示关闭的状态，使用起来就不流畅，所以需要将status取反
  const onShowModal = async () => {
    modalVisible.value = true
    await getSmsTemplateDetailFn(props.smsTemplateId)
    status.value = !smsTemplateDetail.value.status
  }

  // 关闭弹窗
  const onClose = () => {
    modalVisible.value = false
  }
</script>

<template>
  <div>
    <div style="display: inline-block" @click="onShowModal">
      <slot></slot>
    </div>

    <HModal @close="onClose" title="短信模版详情" v-model="modalVisible">
      <div v-loading="getSmsTemplateDetailLoading">
        <el-descriptions label-class-name="label" v-if="smsTemplateDetail" :column="1">
          <!--模版名称-->
          <el-descriptions-item>
            <template #label>
              <div class="label">模版名称：</div>
            </template>
            <div>{{ smsTemplateDetail.name }}</div>
          </el-descriptions-item>

          <!--模版类型-->
          <el-descriptions-item>
            <template #label>
              <div class="label">模版类型：</div>
            </template>
            <div>
              <span v-if="smsTemplateDetail.type === 1">验证类短信</span>
              <span v-else-if="smsTemplateDetail.type === 2">通知类</span>
              <span v-else>推广类</span>
            </div>
          </el-descriptions-item>

          <!--模版编号-->
          <el-descriptions-item>
            <template #label>
              <div class="label">模版编号：</div>
            </template>
            <div>{{ smsTemplateDetail.code }}</div>
          </el-descriptions-item>

          <!--发布状态-->
          <el-descriptions-item>
            <template #label>
              <div class="label">发布状态：</div>
            </template>
            <div>
              <HStatus v-if="smsTemplateDetail.release">
                <span style="font-size: 12px">已发布</span>
              </HStatus>
              <HStatus v-else type="info">
                <span style="font-size: 12px">已下架</span>
              </HStatus>
            </div>
          </el-descriptions-item>

          <!--是否启用-->
          <el-descriptions-item>
            <template #label>
              <div class="label">是否启用：</div>
            </template>
            <div>
              <HStatus v-if="status">
                <span style="font-size: 12px">启用</span>
              </HStatus>
              <HStatus type="info" v-else>
                <span style="font-size: 12px">禁用</span>
              </HStatus>
            </div>
          </el-descriptions-item>

          <!--模版内容-->
          <el-descriptions-item>
            <template #label>
              <div class="label">模版内容：</div>
            </template>
            <div>{{ smsTemplateDetail.content }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <template #footerRight>
        <HButton is-modal @click="onClose">关闭</HButton>
      </template>
    </HModal>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-descriptions__cell) {
    display: flex;
    align-items: center;
  }

  .label {
    white-space: nowrap;
    text-align: right;
    width: 100px;
  }
</style>
